<template>
  <div v-loading="loading">
    <div class="content-header">
      <span>水印设置</span>
      <el-button
        type="primary"
        @click="save">保存</el-button>
    </div>
    <reminder content="水印开启后，对所有表单、所有角色有效。水印开启后，对Web端和App端同时生效。" />
    <div class="content-body">
      <div class="set-content">
        <el-radio-group v-model="status">
          <el-radio :label="0">不启用</el-radio>
          <el-radio :label="1">启用</el-radio>
        </el-radio-group>
      </div>

      <div v-if="status === 1" class="form-wrap">
        <div v-for="(item, index) in formList" :key="index" class="form-item">
          <div class="form-label">
            {{ item.label }}
            <template v-if="item.field === 'angle'">
              <el-tooltip class="item" effect="dark" content="角度值为0-180" placement="top-start">
                <i class="wk wk-icon-fill-help wk-help-tips" />
              </el-tooltip>
            </template>
          </div>
          <div class="form-content">
            <div v-if="item.formType === 'textarea'">
              <div class="field-wrap">
                插入水印内容
                <el-select
                  v-model="interField"
                  style="width: 200px;margin-left: 10px;"
                  placeholder="请选择插入字段"
                  @change="handleInterset($event, item.field)">
                  <el-option
                    v-for="sitem in interFieldList"
                    :key="sitem.value"
                    :label="sitem.label"
                    :value="sitem.value" />
                </el-select>
              </div>
              <el-input
                ref="content"
                v-model="form[item.field]"
                type="textarea"
                placeholder="请输入水印内容" />
              <div class="water-preview">预览：{{ waterPreview }}</div>
            </div>

            <el-color-picker
              v-else-if="item.formType === 'color'"
              v-model="form[item.field]"
              :predefine="predefineColors" />

            <el-select
              v-else-if="item.formType === 'select'"
              v-model="form[item.field]"
              class="el-select"
              placeholder="请选择">
              <el-option
                v-for="sitem in options[item.field]"
                :key="sitem.value"
                :label="sitem.label"
                :value="sitem.value" />
            </el-select>

            <el-input-number
              v-if="item.formType === 'input'"
              v-model="form[item.field]"
              :controls="false"
              :min="0"
              :max="180"
              class="small" />
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {
  enterpriseSecurityWaterMarkConfigQueryAPI,
  enterpriseSecurityWaterMarkConfigSettingAPI
} from '@/api/admin/enterpriseSecuritySetting'

import Reminder from '@/components/Reminder'

import { mapGetters } from 'vuex'

export default {
  name: 'WatermarkSetting',

  components: {
    Reminder
  },

  data() {
    return {
      loading: false, // 展示加载中效果

      status: 0,
      form: {
        content: '',
        fontSize: '12px',
        density: 'middle',
        color: '#42526E',
        angle: 20
      },
      formList: [
        { label: '水印内容', field: 'content', formType: 'textarea' },
        { label: '水印字号', field: 'fontSize', formType: 'select' },
        { label: '水印密度', field: 'density', formType: 'select' },
        { label: '水印颜色', field: 'color', formType: 'color' },
        { label: '水印角度', field: 'angle', formType: 'input' }
      ],
      options: {
        fontSize: [
          { label: '8px', value: '8px' },
          { label: '9px', value: '9px' },
          { label: '10px', value: '10px' },
          { label: '11px', value: '11px' },
          { label: '12px', value: '12px' },
          { label: '13px', value: '13px' },
          { label: '14px', value: '14px' },
          { label: '15px', value: '15px' },
          { label: '16px', value: '16px' },
          { label: '17px', value: '17px' },
          { label: '18px', value: '18px' },
          { label: '19px', value: '19px' },
          { label: '20px', value: '20px' },
          { label: '21px', value: '21px' },
          { label: '22px', value: '22px' },
          { label: '23px', value: '23px' },
          { label: '24px', value: '24px' },
          { label: '25px', value: '25px' },
          { label: '26px', value: '26px' }
        ],
        density: [
          { label: '密集', value: '0' },
          { label: '中等', value: '1' },
          { label: '宽松', value: '2' }
        ]
      },
      predefineColors: [
        '#42526E', '#8993A4', '#00B8D9', '#36B37E', '#D98757', '#FFAB00',
        '#FF8C40', '#FF7452', '#FF70D4', '#8777D9', '#4C9AFF', '#0065FF'
      ],
      interField: '',
      interFieldList: [
        { label: '当前员工姓名', value: 'realname' },
        { label: '当前员工手机尾号', value: 'mobile' },
        { label: '当前员工部门', value: 'deptName' },
        { label: '企业名称', value: 'companyName' },
        { label: '当前日期', value: 'date' },
        { label: '当前时间', value: 'time' }
      ],

      settingId: null
    }
  },

  computed: {
    ...mapGetters([
      'userInfo'
    ]),
    waterPreview() {
      const { realname, mobile, deptName, companyName } = this.userInfo
      const currentDate = this.$moment().format('YYYY-MM-DD')
      const currentDateTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
      const waterMarkContent = this.form.content.replace(/{realname}/g, realname)
        .replace(/{mobile}/g, mobile && mobile.slice(-4))
        .replace(/{deptName}/g, deptName)
        .replace(/{companyName}/g, companyName)
        .replace(/{date}/g, currentDate)
        .replace(/{time}/g, currentDateTime)
      return waterMarkContent
    }
  },

  created() {
    this.queryWaterMarkConfig()
  },

  methods: {
    /**
     * @description: 查询水印配置
     * @return {*}
     */
    queryWaterMarkConfig() {
      this.loading = true
      enterpriseSecurityWaterMarkConfigQueryAPI().then(res => {
        const { status, value, settingId } = res.data || {}
        this.status = status
        this.settingId = settingId
        this.form = JSON.parse(value) || {}
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * @description: 选择字段进行插入操作
     * @param {*} data
     * @param {*} field
     * @return {*}
     */
    handleInterset(data, field) {
      const contentDom = this.$refs.content[0].$refs.textarea
      const { selectionStart, selectionEnd, value = '' } = contentDom
      const intersetText = `{${data}}`
      this.interField = data
      this.form[field] = contentDom.innerText = value.slice(0, selectionStart) + intersetText + value.slice(selectionEnd)
      contentDom.selectionStart = selectionStart + intersetText.length
      contentDom.selectionEnd = selectionStart + intersetText.length
    },

    /**
     * 保存操作
     */
    save() {
      if (this.status === 1) {
        if (!this.form.content) {
          return this.$message.error('请输入水印内容')
        }
      }

      this.loading = true
      const params = {
        status: this.status,
        settingId: this.settingId
      }

      if (this.status === 1) {
        params.value = JSON.stringify(this.form)
      }

      enterpriseSecurityWaterMarkConfigSettingAPI(params)
        .then(res => {
          this.loading = false
          this.$message.success('操作成功')
          this.queryWaterMarkConfig()
          this.$store.commit('SET_WATERMARK')
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./index.scss";

.form-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 20px;

  .form-label {
    width: 80px;
    margin-right: 40px;
    line-height: 32px;
  }

  .form-content {
    width: 376px;

    .field-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 10px;
    }

    .water-preview {
      padding-top: 6px;
      font-size: 14px;
      color: #6b778c;
    }

    .el-select {
      width: 100%;
    }

    ::v-deep .el-input-number {
      width: 100%;

      .el-input__inner {
        text-align: left;
      }
    }
  }
}

.el-radio {
  display: block;
  padding: 10px 0;
}

.set-content {
  margin-bottom: 20px;
}

.el-input {
  width: 208px;
}
</style>

